

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/insert1.png">
  <link rel="icon" href="/img/insert1.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  
    <meta name="description" content="无聊的人生只剩下无尽的空虚。">
  
  <meta name="author" content="Mike Taylor">
  <meta name="keywords" content="我的博客">
  
  <title>JavaScript基础 - Mike Taylor</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"gitee.com","root":"/","version":"1.8.8","typing":{"enable":true,"typeSpeed":30,"cursorChar":"|","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
</head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Mike Taylor's</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                主页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                日志
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                目录
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                个人
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript基础">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      Mike Taylor
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-05-25 20:27" pubdate>
        2021年5月25日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      7.5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      98
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript基础</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2021年5月31日 晚上
                
              </p>
            
            <div class="markdown-body">
              <h1 id="第14章-JavaScript基础"><a href="#第14章-JavaScript基础" class="headerlink" title="第14章 JavaScript基础"></a>第14章 JavaScript基础</h1><p><strong>课程提要</strong></p>
<ul>
<li>JavaScript概述</li>
<li>使用JavaScript</li>
<li>语法、关键词保留字及变量</li>
<li>数据类型</li>
<li>运算符</li>
<li>流程控制语句</li>
</ul>
<h2 id="14-1-Javascript概述"><a href="#14-1-Javascript概述" class="headerlink" title="14.1 Javascript概述"></a>14.1 Javascript概述</h2><h3 id="14-1-1-什么是JavaScript"><a href="#14-1-1-什么是JavaScript" class="headerlink" title="14.1.1 什么是JavaScript"></a>14.1.1 什么是JavaScript</h3><p>JavaScript是一种具有<strong>面向对象</strong>能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具 有相对安全性的<strong>客户端脚本语言</strong>。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。</p>
<p>它的主要目的是：验证发往服务器端的数据、增加Web互动、加强用户体验度等。 </p>
<p>一个网页由三部分组成：结构（HTML\HTML5）、表现（CSS/CSS3）、行为（JavaScript-前端开发的核心）</p>
<h3 id="14-1-2-JavaScript特点"><a href="#14-1-2-JavaScript特点" class="headerlink" title="14.1.2 JavaScript特点"></a>14.1.2 JavaScript特点</h3><h4 id="松散性"><a href="#松散性" class="headerlink" title="松散性"></a>松散性</h4><p>JavaScript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语 言，也就是说，它的变量不必具有一个明确的类型。 </p>
<p>JS是一种弱类型的语言（允许将一块内存看做多种类型）。</p>
<h4 id="对象属性"><a href="#对象属性" class="headerlink" title="对象属性"></a>对象属性</h4><p> JavaScript中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组，而不像C中的结构体 或者C++、Java中的对象。 </p>
<h4 id="继承机制"><a href="#继承机制" class="headerlink" title="继承机制"></a>继承机制</h4><p> JavaScript中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的Self语言很像，而和C++以及 Java中的继承大不相同。 </p>
<p>基于原型继承机制。</p>
<h3 id="14-1-3-Javascript核心"><a href="#14-1-3-Javascript核心" class="headerlink" title="14.1.3 Javascript核心"></a>14.1.3 Javascript核心</h3><p>虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要 多得多。</p>
<p> 一个完整的JavaScript应该由下列三个不同的部分组成： </p>
<ul>
<li><p>核心（ ECMAScript     ECMA-262） </p>
</li>
<li><p>文档对象模型 （ DOM   W3C ） </p>
</li>
<li><p>浏览器对象模型 （ BOM    无标准） </p>
</li>
</ul>
<p><strong>ECMAScript介绍</strong> </p>
<p>ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往 被称为JavaScript或JScript， 但实际上后两者是ECMA-262标准的实现和扩展。</p>
<p>基础语言部分：基础、面向对象等</p>
<p><strong>文档对象模型 （ DOM ）介绍</strong> </p>
<p>文档对象模型(DOM，Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API， Application Programming Interface)。DOM有三个级别，每个级别都会新增很多内容模块和标准(有兴趣可以搜索 查询)。 </p>
<p>节点操作：动态添加标签、样式</p>
<p><strong>浏览器对象模型 （ BOM）介绍</strong> </p>
<p>访问和操作浏览器窗口的浏览器对象模型(BOM，Browser Object Model)。开发人员使用BOM可以控制浏览 器显示页面以外的部分。而BOM真正与众不同的地方(也是经常会导致问题的地方)，还是它作为JavaScript实现的 一部分，至今仍没有相关的标准。 </p>
<p>浏览器操作</p>
<h2 id="14-2-使用javascript"><a href="#14-2-使用javascript" class="headerlink" title="14.2 使用javascript"></a>14.2 使用javascript</h2><h3 id="14-2-1-script标签解析"><a href="#14-2-1-script标签解析" class="headerlink" title="14.2.1 script标签解析"></a>14.2.1 script标签解析</h3><p><code>&lt;script&gt;&lt;script&gt;</code>这组标签，是用于在html页面中插入js的主要方法，可以写在网页任意位置，因为JS是同步执行的，但为了避免JS阻塞，最好写在body后。它主要有以下几个属性：</p>
<p> type：必需。表示代码使用的脚本语言的内容类型。例如：type=”text/javascript”。 </p>
<p>charset：可选。表示通过src属性指定的字符集。 （现在开发一般不用）</p>
<p>defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。（现在开发一般不用）</p>
<p>src：可选。表示包含要执行代码的外部文件。（只能用于引入JS文件） </p>
<p>async：可选。规定异步执行脚本（<strong>仅适用于外部脚本</strong>），在加载DOM元素的同时可以允许JS代码。</p>
<p><strong>JS阻塞例子：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span> <span class="hljs-attr">defer</span>=<span class="hljs-string">&quot;defer&quot;</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br><span class="javascript">  <span class="hljs-comment">// defer：表示所有DOM元素加载完成后，再加载这段JS代码</span></span><br><span class="javascript">  <span class="hljs-comment">// charset：字符编码</span></span><br><span class="javascript">    alert(<span class="hljs-string">&#x27;写出的第一个JS程序！&#x27;</span>);</span><br><span class="javascript">    alert(<span class="hljs-string">&#x27;写出的第二个JS程序！&#x27;</span>);</span><br><span class="javascript">    <span class="hljs-comment">// 表示弹出一个弹窗</span></span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>ddd<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>ddd<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span> <span class="hljs-attr">defer</span>=<span class="hljs-string">&quot;defer&quot;</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br><span class="javascript">  <span class="hljs-comment">// defer：表示所有DOM元素加载完成后，再加载这段JS代码</span></span><br><span class="javascript">  <span class="hljs-comment">// charset：字符编码</span></span><br><span class="javascript">    alert(<span class="hljs-string">&#x27;写出的第一个JS程序！&#x27;</span>);</span><br>    alert(&#x27;写出的第二个JS程序！);<br><span class="javascript">    <span class="hljs-comment">// 表示弹出一个弹窗</span></span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>前者未加载body，后者加载body。</p>
<ul>
<li><p>在a标签的href中写JS代码（但实际开发中不建议使用，因为代码会影响性能）。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:var a=10,b=20;alert(&#x27;结果为：&#x27;+(a+b))&quot;</span>&gt;</span>计算结果<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:close()&quot;</span>&gt;</span><span class="hljs-symbol">&amp;times;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:void(1)&quot;</span>&gt;</span>test;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-comment">&lt;!--阻止刷新整个页面--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span>test;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-comment">&lt;!--刷新整个页面--&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>使用Script标签(只在当前文件有效)：略</p>
</li>
<li><p>任意位置可以用Script标签引入外部JS文件（共享）。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../js/1.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

</li>
</ul>
<p>注意：</p>
<ul>
<li><p>要输出script结束标签时，必须拆开写：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js">alert(<span class="hljs-string">&#x27;&lt;/scr&#x27;</span>+<span class="hljs-string">&#x27;ipt&gt;&#x27;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p>带有src属性的script元素不应该在其标签之间再包含额外的JavaScript代码，因为它会被忽略。 </p>
</li>
</ul>
<h3 id="14-2-2-js代码嵌入的一些问题"><a href="#14-2-2-js代码嵌入的一些问题" class="headerlink" title="14.2.2 js代码嵌入的一些问题"></a>14.2.2 js代码嵌入的一些问题</h3><p>如果你想弹出一个标签的字符串，那么浏览器会误解成JS代码已经结束了。解决的方法，就是把字符 串分成两个部分，通过连接符<code>+</code>来连接。 实例：</p>
<h2 id="14-3-语法、关键保留字及变量"><a href="#14-3-语法、关键保留字及变量" class="headerlink" title="14.3 语法、关键保留字及变量"></a>14.3 语法、关键保留字及变量</h2><h3 id="14-3-1-语法"><a href="#14-3-1-语法" class="headerlink" title="14.3.1 语法"></a>14.3.1 语法</h3><p><strong>区分大小写</strong> </p>
<p>ECMAScript中的一切，包括变量、函数名和操作符都是区分大小写的。例如：book和Book表示两种不同的变 量。 </p>
<p><strong>标识符</strong> </p>
<p>所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式规则组合起来的一或 多个字符： </p>
<ul>
<li><p>第一字符必须是一个字母、下划线（_）或一个美元符号（$）。</p>
</li>
<li><p>其他字符可以是字母、下划线、美元符号或数字。 </p>
</li>
<li><p>不能把关键字、保留字、true、false和null作为标识符。 </p>
</li>
</ul>
<p><strong>注释</strong></p>
<p> ECMAScript使用C风格的注释，包括单行注释和块级注释，注释语句在浏览器中不会被解析执行，只是起说明作用。多写注释，方便维护。 实例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br><span class="hljs-comment">//单行注释，一般用于当前行的代码解释</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">这是一个多行注释，也叫块注释，一般用于对下面的代码进行整体说明，且说明内容可能较多。</span><br><span class="hljs-comment">*/</span><br>&lt;/script&gt;<br><br></code></pre></td></tr></table></figure>

<p><strong>直接量(常量/字面量literal)</strong> </p>
<p>程序中直接显示出来的数据值，不可以改变。 如：</p>
<figure class="highlight fsharp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs fsharp"><span class="hljs-number">100</span> <span class="hljs-comment">//数字字面量</span><br>‘前端开发&#x27;           <span class="hljs-comment">//字符串字面量</span><br><span class="hljs-keyword">false</span>             <span class="hljs-comment">//布尔字面量</span><br>/js/gi           <span class="hljs-comment">//正则表达式字面量</span><br><span class="hljs-keyword">null</span>               <span class="hljs-comment">//对象字面量</span><br></code></pre></td></tr></table></figure>

<h3 id="14-3-2-关键字和保留字"><a href="#14-3-2-关键字和保留字" class="headerlink" title="14.3.2 关键字和保留字"></a>14.3.2 关键字和保留字</h3><p><strong>什么是关键字</strong></p>
<p>ECMAScript-262描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的 操作等。关键字也是语言保留的，不能用作标识符。  </p>
<p><strong>ECMAScript关键字</strong></p>
<figure class="highlight livescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs livescript"><span class="hljs-keyword">break</span>、<span class="hljs-keyword">else</span>、<span class="hljs-keyword">new</span>、<span class="hljs-keyword">var</span>、<span class="hljs-keyword">case</span>、<span class="hljs-keyword">finally</span> 、<span class="hljs-keyword">return</span> 、<span class="hljs-literal">void</span>、<span class="hljs-keyword">catch</span>、<span class="hljs-keyword">for</span>、<span class="hljs-keyword">switch</span>、<span class="hljs-keyword">while</span>、<span class="hljs-keyword">continue</span>、<br><span class="hljs-keyword">function</span>、<span class="hljs-built_in">this</span>、<span class="hljs-keyword">with</span>、<span class="hljs-keyword">default</span>、<span class="hljs-keyword">if</span>、<span class="hljs-keyword">throw</span>、<span class="hljs-keyword">delete</span>、<span class="hljs-keyword">in</span>、<span class="hljs-keyword">try</span>、<span class="hljs-keyword">do</span>、<span class="hljs-keyword">instanceof</span>、<span class="hljs-keyword">typeof</span>等<br></code></pre></td></tr></table></figure>

<p><strong>什么是保留字</strong></p>
<p>ECMAScript-262还描述了另一组不能用作标识符的保留字。尽管保留字在JavaScript中还没有特定的用途，但 它们很有可能在将来被用作关键字。</p>
<figure class="highlight angelscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs angelscript"><span class="hljs-keyword">abstract</span>、<span class="hljs-keyword">enum</span>、<span class="hljs-built_in">int</span>、short、<span class="hljs-built_in">bool</span>ean、export、<span class="hljs-keyword">interface</span>、<span class="hljs-symbol">static</span>、<span class="hljs-symbol">byte</span>、<span class="hljs-symbol">extends</span>、<span class="hljs-symbol">long</span>、<br><span class="hljs-symbol">super</span>、<span class="hljs-symbol">char</span>、<span class="hljs-symbol">final</span>、<span class="hljs-symbol">native</span>、<span class="hljs-symbol">synchronized</span>、<span class="hljs-symbol">class</span>、<span class="hljs-symbol">float</span>、<span class="hljs-symbol">package</span>、<span class="hljs-symbol">throws</span>、<span class="hljs-symbol">const</span>、<span class="hljs-symbol">goto</span>、<br><span class="hljs-symbol">private</span>、<span class="hljs-symbol">transient</span>、<span class="hljs-symbol">debugger</span>、<span class="hljs-symbol">implements</span>、<span class="hljs-symbol">protected</span>、<span class="hljs-symbol">volatile</span>、<span class="hljs-symbol">double</span>、<span class="hljs-symbol">import</span>、<span class="hljs-symbol">public</span>等<br></code></pre></td></tr></table></figure>

<p>注意：在JS中任意地方严格区分大小写！！！</p>
<h3 id="14-3-3-变量"><a href="#14-3-3-变量" class="headerlink" title="14.3.3 变量"></a>14.3.3 变量</h3><p><strong>什么是变量</strong></p>
<p>ECMAScript的变量是松散类型的，所谓松散类型就是用来保存任何类型的数据。定义变量时要使用var操作符 （var是关键），后面跟一个变量名（变量名是标识符）。命名要符合上面的规范。 实例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">/*定义变量*/</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> x = <span class="hljs-number">10</span>;<span class="hljs-comment">//定义一个内存变量，初始值为10</span></span><br>    /*<br>    * 项目需求：编写一个键盘输入用户名，然后在浏览器中输出。<br>    * 步骤：引入prompt方法<br>    * 输出到浏览器中<br>    * */<br><span class="javascript">    <span class="hljs-keyword">var</span> user = prompt(<span class="hljs-string">&#x27;请输入您的姓名：&#x27;</span>); <span class="hljs-comment">// 从键盘输入的内容存到内存变量user中</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;您的姓名为：&#x27;</span>+user); <span class="hljs-comment">// document.write()表示输出到浏览器中</span></span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>所谓变量，就是可以初始化后可以再次改变的量。ECMAScript属于弱类型(松散类型)的语言，<strong>可以同时改变不同类型的量</strong>。</p>
<ul>
<li><p>说明：</p>
<ul>
<li><p>定义变量时，不需要给出变量类型（松散式语言）。</p>
</li>
<li><p>变量也可以重复定义，后面定义的会覆盖前面定义的变量。</p>
</li>
<li><p>不用var定义对象也可以，默认是Windows对象添加了一个属性。</p>
</li>
<li><p>定义的变量没有赋值，默认值为Underfined。</p>
</li>
<li><p>一条语句可以以一个 <code>;</code>结束，也可以不加，如果多条语句写在同一行上，那么必须加分号隔开。</p>
</li>
<li><p>在书写代码时，除了字符串中可以使用中文标点之外，其他任何只能使用英文标点。</p>
</li>
</ul>
</li>
</ul>
<p>注意：虽然可以改变不同类型的量，但这样做对于后期维护带来困难，而且性能也不高，导致成本很高！</p>
<ul>
<li><p>定义：</p>
<ul>
<li><p>只定义变量</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">var</span> x;<br><span class="hljs-selector-tag">var</span> <span class="hljs-selector-tag">a</span>,<span class="hljs-selector-tag">b</span>,c;<br></code></pre></td></tr></table></figure>
</li>
<li><p>定义数值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript"><span class="hljs-meta">    &#x27;use strict&#x27;</span>;<span class="hljs-comment">//严格代码模式（变量必须先定义后使用）</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> x = <span class="hljs-number">1</span>;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> x = <span class="hljs-number">2</span>;</span><br><span class="javascript">    name = <span class="hljs-string">&#x27;周三&#x27;</span>;</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment">/*用于开发时的测试*/</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(name);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span>(name)); <span class="hljs-comment">// string</span></span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>
<h2 id="14-4-数据类型"><a href="#14-4-数据类型" class="headerlink" title="14.4 数据类型"></a>14.4 数据类型</h2><p><strong>数据类型介绍</strong> </p>
<p>ECMAScript中有5种简单数据类型：undefined、null、boolean、number和string。还有一种复杂数据类型 ——object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。</p>
<p>数据类型：指的是内存存储方式。 </p>
<h3 id="14-4-1-typeof操作符"><a href="#14-4-1-typeof操作符" class="headerlink" title="14.4.1 typeof操作符"></a>14.4.1 typeof操作符</h3><p>typeof操作符是用来检测变量的数据类型。对于值或变量使用typeof操作符会返回如下字符串。</p>
<h4 id="基本数据类型"><a href="#基本数据类型" class="headerlink" title="基本数据类型"></a>基本数据类型</h4><table>
<thead>
<tr>
<th>字符串</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>undefined</td>
<td>未定义</td>
</tr>
<tr>
<td>boolean</td>
<td>布尔型</td>
</tr>
<tr>
<td>string</td>
<td>字符串</td>
</tr>
<tr>
<td>null</td>
<td>空</td>
</tr>
<tr>
<td>number</td>
<td>数值（表示数字，通常可用作进行+-*/%等运算）</td>
</tr>
</tbody></table>
<h4 id="引用数据类型"><a href="#引用数据类型" class="headerlink" title="引用数据类型"></a>引用数据类型</h4><table>
<thead>
<tr>
<th>字符串</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>object</td>
<td>对象</td>
</tr>
<tr>
<td>function</td>
<td>函数</td>
</tr>
</tbody></table>
<h3 id="14-4-1-typeof操作符-1"><a href="#14-4-1-typeof操作符-1" class="headerlink" title="14.4.1 typeof操作符"></a>14.4.1 typeof操作符</h3><p>typeof操作符是用来检测变量的数据类型。对于值或变量使用typeof操作符会返回如下字符串。</p>
<p>typeof操作符可以操作变量，也可以操作字面量。虽然也可以这样使用：typeof(company)，但，typeof是操 作符而非内置函数。</p>
<p>注意：函数在ECMAScript中是对象，不是一种数据类型。所以，使用typeof来区分function和object是非常有必 要的。</p>
<h3 id="14-4-2-undefined类型"><a href="#14-4-2-undefined类型" class="headerlink" title="14.4.2 undefined类型"></a>14.4.2 undefined类型</h3><h4 id="什么是undefined"><a href="#什么是undefined" class="headerlink" title="什么是undefined"></a>什么是undefined</h4><p>undefined类型只有一个值，即特殊的undefined。在使用var声明变量，但没有对其初始化时，这个变量的值 就是undefined。</p>
<h3 id="14-4-3-null类型"><a href="#14-4-3-null类型" class="headerlink" title="14.4.3 null类型"></a>14.4.3 null类型</h3><h4 id="什么是null"><a href="#什么是null" class="headerlink" title="什么是null"></a>什么是null</h4><p>null类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof操作符检测 null会返回object。</p>
<p><strong>说明</strong>：undefined是派生自null的，因此ECMA-262规定对它们的相等性测试返回true。由于<strong>undefined和null 两个值的比较是相等的</strong>，所以，未初始化的变量和赋值为null的变量会相等。这时，可以采用typeof变量的类型进行比较。但建议还是养成编码的规范，不要忘记初始化变量。</p>
<h3 id="14-4-4-boolean类型"><a href="#14-4-4-boolean类型" class="headerlink" title="14.4.4 boolean类型"></a>14.4.4 boolean类型</h3><h4 id="什么是boolean类型"><a href="#什么是boolean类型" class="headerlink" title="什么是boolean类型"></a>什么是boolean类型</h4><p>boolean类型有两个值(字面量)：true和false。而true不一定等于1，false不一定等于0。JavaScript是区分大 小写的，True和False或者其他都不是Boolean类型的值。 </p>
<p>虽然Boolean类型的字面量只有true和false两种，但ECMAScript中所有类型的值都有与这两个Boolean值等价 的值。要将一个值转换为其对应的Boolean值，可以使用转型函数**Boolean()**。</p>
<table>
<thead>
<tr>
<th>数据类型</th>
<th>转换为true的值</th>
<th>转换为false的值</th>
</tr>
</thead>
<tbody><tr>
<td>boolean</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>string</td>
<td>任何非空字符串</td>
<td>空字符串</td>
</tr>
<tr>
<td>number</td>
<td>任何非零数字值(包括无穷大)</td>
<td>0和NaN</td>
</tr>
<tr>
<td>object</td>
<td>任何对象</td>
<td>null</td>
</tr>
<tr>
<td>undefined</td>
<td></td>
<td>undefined</td>
</tr>
</tbody></table>
<h3 id="14-4-5-number类型"><a href="#14-4-5-number类型" class="headerlink" title="14.4.5 number类型"></a>14.4.5 number类型</h3><h4 id="什么是number类型"><a href="#什么是number类型" class="headerlink" title="什么是number类型"></a>什么是number类型</h4><p>number类型包含两种数值：整型和浮点型。为了支持各种数值类型，ECMA-262定义了不同的数值字面量格 式。</p>
<h4 id="不同的进制"><a href="#不同的进制" class="headerlink" title="不同的进制"></a>不同的进制</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// 最基本的数值字面量是十进制整数。</span><br><span class="hljs-keyword">var</span> box = <span class="hljs-number">100</span>;           <span class="hljs-comment">//十进制整数 </span><br><span class="hljs-comment">// 八进制数值字面量，(以8为基数)，前导必须是0，八进制序列(0~7)。     </span><br><span class="hljs-keyword">var</span> box = <span class="hljs-number">070</span>;           <span class="hljs-comment">//八进制，56     </span><br><span class="hljs-comment">// 十六进制字面量前面两位必须是0x，后面是(0~9及A~F)。     </span><br><span class="hljs-keyword">var</span> box = <span class="hljs-number">0xA</span>;       <span class="hljs-comment">//十六进制，10    </span><br></code></pre></td></tr></table></figure>

<h4 id="浮点类型"><a href="#浮点类型" class="headerlink" title="浮点类型"></a>浮点类型</h4><p>浮点类型，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。</p>
<h4 id="NaN是什么"><a href="#NaN是什么" class="headerlink" title="NaN是什么"></a>NaN是什么</h4><p>NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数未返回数 值的情况(这样就不会抛出错误了)。ECMAScript提供了isNaN()函数，用来判断这个值到底是不是NaN。</p>
<p>isNaN()函 数在接收到一个值之后，会尝试将这个值转换为数值。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="javascript">   alert(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">NaN</span>)); <span class="hljs-comment">//true     </span></span><br><span class="javascript">   alert(<span class="hljs-built_in">isNaN</span>(<span class="hljs-number">25</span>)); <span class="hljs-comment">//false，25是一个数值    </span></span><br><span class="javascript">   alert(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&#x27;25&#x27;</span>)); <span class="hljs-comment">//false，&#x27;25&#x27;是一个字符串数值，可以转成数值    </span></span><br><span class="javascript">   alert(<span class="hljs-built_in">isNaN</span>(<span class="hljs-string">&#x27;Lee&#x27;</span>)); <span class="hljs-comment">//true，&#x27;Lee&#x27;不能转换为数值     </span></span><br><span class="javascript">   alert(<span class="hljs-built_in">isNaN</span>(<span class="hljs-literal">true</span>)); <span class="hljs-comment">//false，true可以转成成1 </span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>注意：可以转换为数值类型的其他类型的数据isNaN()返回false</p>
<h3 id="14-4-6-string类型"><a href="#14-4-6-string类型" class="headerlink" title="14.4.6 string类型"></a>14.4.6 string类型</h3><h4 id="string类型的介绍"><a href="#string类型的介绍" class="headerlink" title="string类型的介绍"></a>string类型的介绍</h4><p>string类型用于表示由于零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号(“)或单 引号(‘)表示。这两种表示方法没有任何区别。但要记住的是，必须成对出现，不能穿插使用，否则会出错。 ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保 存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。</p>
<p>注意：无论是单引号还是双引号，只要是英文的，都要加<code>\</code>进行转义。</p>
<h3 id="14-4-7-object类型"><a href="#14-4-7-object类型" class="headerlink" title="14.4.7 object类型"></a>14.4.7 object类型</h3><h4 id="object类型的介绍"><a href="#object类型的介绍" class="headerlink" title="object类型的介绍"></a>object类型的介绍</h4><p>ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型 的名称来创建，用来申明或存储一个对象（函数、对象、正则、字符对象、数值对象等）。</p>
<h2 id="14-5-运算符"><a href="#14-5-运算符" class="headerlink" title="14.5 运算符"></a>14.5 运算符</h2><h4 id="运算符的介绍"><a href="#运算符的介绍" class="headerlink" title="运算符的介绍"></a>运算符的介绍</h4><p>ECMA-262描述了一组用于操作数据值的运算符，包括</p>
<ul>
<li><p>一元运算符</p>
</li>
<li><p>算术运算符</p>
</li>
<li><p>关系运算符</p>
</li>
<li><p>逻辑运算符</p>
</li>
<li><p>三元运算符</p>
</li>
<li><p>位运算符（不讲，因为一般不用）</p>
</li>
<li><p>字符串运算符(+ - 拼接/连接)</p>
<ul>
<li><p>实现字符串之间的连接。</p>
</li>
<li><p>数值与字符串进行 + 运算时，数值型会自动转换为字符，再运算。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span> + <span class="hljs-string">&#x27;abc&#x27;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p>boolean型数值与字符串进行 + 运算时，boolean型数值会自动转换为字符，再运算。</p>
</li>
<li><p>underfined与字符串进行 + 运算时，undedined会自动转换为字符，再运算。</p>
</li>
<li><p>输出字符串长度</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">console</span>((<span class="hljs-string">&#x27;aaa&#x27;</span>+<span class="hljs-string">&#x27;bbb&#x27;</span>).length);<span class="hljs-comment">//6</span><br></code></pre></td></tr></table></figure>

</li>
</ul>
</li>
</ul>
<p>ECMAScript中的运算符适用于很多值，包括字符串、数值、布尔值、对象等。 </p>
<h3 id="14-5-1-一元运算符"><a href="#14-5-1-一元运算符" class="headerlink" title="14.5.1 一元运算符"></a>14.5.1 一元运算符</h3><h4 id="什么是一元运算符"><a href="#什么是一元运算符" class="headerlink" title="什么是一元运算符"></a>什么是一元运算符</h4><p>只能操作一个值的运算符叫做一元运算符。 </p>
<h4 id="1．递增-和递减–"><a href="#1．递增-和递减–" class="headerlink" title="1．递增++和递减–"></a>1．递增++和递减–</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br> <span class="hljs-keyword">var</span> box = <span class="hljs-number">100</span>;     <br> ++box;                           <span class="hljs-comment">//把box累加一个1，相当于box = box+1     </span><br> --box;                           <span class="hljs-comment">//把box累减一个1，相当于box = box-1     </span><br> box++;                           <span class="hljs-comment">//同上     </span><br> box--;                           <span class="hljs-comment">//同上</span><br><span class="hljs-keyword">var</span> x = <span class="hljs-number">10</span><br><span class="hljs-keyword">var</span> a = ++x +(++x) + x++ + x;<span class="hljs-comment">// 11 12 12 13</span><br>&lt;/script<br></code></pre></td></tr></table></figure>

<h4 id="2．前置和后置的区别"><a href="#2．前置和后置的区别" class="headerlink" title="2．前置和后置的区别"></a>2．前置和后置的区别</h4><p>在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会 先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box = <span class="hljs-number">100</span>;     <br>   <span class="hljs-keyword">var</span> age = ++box;                   <span class="hljs-comment">//age值为101     </span><br>   <span class="hljs-keyword">var</span> height = box++;                 <span class="hljs-comment">//height值为100</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="14-5-2-算术运算符"><a href="#14-5-2-算术运算符" class="headerlink" title="14.5.2 算术运算符"></a>14.5.2 算术运算符</h3><p>什么是算术运算符 ECMAScript定义了5个算术运算符，加减乘除求模(取余)。</p>
<p>取余运算结果符号与被除数保持一致。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box1 = <span class="hljs-number">1</span>+<span class="hljs-number">2</span>;<span class="hljs-comment">//加法，等于3</span><br>   <span class="hljs-keyword">var</span> box2 = <span class="hljs-number">100</span>-<span class="hljs-number">20</span>;<span class="hljs-comment">//减法，等于80</span><br>   <span class="hljs-keyword">var</span> box3 = <span class="hljs-number">2</span>*<span class="hljs-number">2</span>;<span class="hljs-comment">//乘法，等于4</span><br>   <span class="hljs-keyword">var</span> box4 = <span class="hljs-number">100</span>/<span class="hljs-number">50</span>;<span class="hljs-comment">//除法,等于2</span><br>   <span class="hljs-keyword">var</span> box5 = <span class="hljs-number">10</span>%<span class="hljs-number">3</span>;<span class="hljs-comment">//取余，等于1，余数为1</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="14-5-3-关系运算符"><a href="#14-5-3-关系运算符" class="headerlink" title="14.5.3 关系运算符"></a>14.5.3 关系运算符</h3><p>什么是关系运算符</p>
<p> 用于进行比较的运算符称作为关系运算符：小于(&lt;)、大于(&gt;)、小于等于(&lt;=)、大于等于(&gt;=)、相等(===)、不等 (!=)、全等(恒等)(===)、不全等(不恒等)(!==) ,返回值只能是true/false。</p>
<ul>
<li>区分==和===<ul>
<li>==：比较值</li>
<li>===：比较值和数据类型</li>
</ul>
</li>
</ul>
<p>和其他运算符一样，当关系运算符操作非数值时要遵循一下规则： </p>
<ul>
<li><p>两个操作数都是数值，则数值比较；</p>
</li>
<li><p>两个操作数都是字符串，则比较两个字符串对应的字符编码值； （按位比较，’abcasasasada‘&lt;’az’）</p>
<ul>
<li>A-&gt;65</li>
<li>a-&gt;97</li>
<li>回车-&gt;13</li>
<li>ESC-&gt;27</li>
<li>0-&gt;48</li>
</ul>
</li>
<li><p>两个操作数都是汉字，比较的是Unicode编码值大小。</p>
<ul>
<li><p>求汉字字符串编码charCodeAt()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;张三&#x27;</span>.charCodeAt(<span class="hljs-number">0</span>));<span class="hljs-comment">//求第一个汉字的Unicode编码  24352</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;李四&#x27;</span>.charCodeAt(<span class="hljs-number">0</span>));<span class="hljs-comment">//求第一个汉字的Unicode编码 26446</span><br></code></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；</p>
<ul>
<li>boolean与数值</li>
<li>string与数值</li>
</ul>
</li>
<li><p>两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较；</p>
</li>
<li><p>码值：部分符号&lt;数字&lt;大写字母&lt;小写字母&lt;汉字</p>
</li>
<li><p><strong>符号之间不能有空格</strong></p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br> <span class="hljs-keyword">var</span> box = <span class="hljs-number">3</span> &gt; <span class="hljs-number">2</span>;                     <span class="hljs-comment">//true     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-number">3</span> &gt; <span class="hljs-number">22</span>;                   <span class="hljs-comment">//false     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;3&#x27;</span> &gt; <span class="hljs-number">22</span>;                 <span class="hljs-comment">//false     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;3&#x27;</span> &gt; <span class="hljs-string">&#x27;22&#x27;</span>;               <span class="hljs-comment">//true     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;a&#x27;</span> &gt; <span class="hljs-string">&#x27;b&#x27;</span>;                 <span class="hljs-comment">//false a=97,b=98     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;a&#x27;</span> &gt; <span class="hljs-string">&#x27;B&#x27;</span>;                 <span class="hljs-comment">//true   B=66     </span><br> <span class="hljs-keyword">var</span> box = <span class="hljs-number">1</span> &gt; &#123;&#125;;                   <span class="hljs-comment">//false</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="14-5-4-逻辑运算符"><a href="#14-5-4-逻辑运算符" class="headerlink" title="14.5.4 逻辑运算符"></a>14.5.4 逻辑运算符</h3><p>逻辑运算符介绍</p>
<p> 逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND)、逻辑或 (OR)、逻辑非(NOT)。 返回逻辑值true/false或者其他值。</p>
<p>1．逻辑与(AND) ：&amp;&amp; </p>
<p>逻辑与运算符属于<strong>短路操作</strong>，顾名思义，如果第一个操作数返回是false，第二个数不管是true还是false都返回的false。 </p>
<ul>
<li>注意：<ul>
<li><strong>如果两个操作数中任意一个操作数非逻辑值，第一个操作数的结果为false时，返回第一个操作数</strong></li>
<li><strong>如果两个操作数中任意一个操作数非逻辑值，第一个操作数的结果为true时，返回第二个操作数</strong></li>
</ul>
</li>
</ul>
<p>注意</p>
<p>2．逻辑或(OR)：|| </p>
<p>两边只要有一边是true，返回true。也有<strong>短路操作</strong>，第一个true，第二个操作数就不再考虑了。 </p>
<ul>
<li>注意：<ul>
<li><strong>如果两个操作数中任意一个操作数非逻辑值，第一个操作数的结果为true时，返回第一个操作数</strong></li>
<li><strong>如果两个操作数中任意一个操作数非逻辑值，第一个操作数的结果为false时，返回第二个操作数</strong></li>
</ul>
</li>
</ul>
<p>3．逻辑非(NOT)：! </p>
<p>逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是： 先将这个值转换成布尔值，然后取反。</p>
<ul>
<li><p>注意：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js">对象或数组，不管有没有值，都转换为<span class="hljs-literal">true</span>(实际上取的是地址)<br><span class="hljs-built_in">console</span>.log(!&#123;&#125;); <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(![]); <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(!&#123;<span class="hljs-attr">key</span>:<span class="hljs-string">&#x27;abc&#x27;</span>&#125;);<span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(![<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>]);<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs sql">console.<span class="hljs-built_in">log</span>(<span class="hljs-operator">!</span><span class="hljs-number">123</span>);<span class="hljs-operator">/</span><span class="hljs-operator">/</span> <span class="hljs-literal">false</span> 非<span class="hljs-number">0</span>数值将自动转换为<span class="hljs-literal">true</span><br>console.<span class="hljs-built_in">log</span>(<span class="hljs-operator">!</span><span class="hljs-number">0</span>);<span class="hljs-operator">/</span><span class="hljs-operator">/</span> <span class="hljs-literal">true</span> <span class="hljs-number">0</span>数值将自动转换为<span class="hljs-literal">false</span><br>console.<span class="hljs-built_in">log</span>(<span class="hljs-operator">!</span><span class="hljs-string">&#x27;abc&#x27;</span>);<span class="hljs-operator">/</span><span class="hljs-operator">/</span> <span class="hljs-literal">false</span> 非空字符串自动转换为<span class="hljs-literal">true</span><br>console.<span class="hljs-built_in">log</span>(<span class="hljs-operator">!</span><span class="hljs-string">&#x27;&#x27;</span>);<span class="hljs-operator">/</span><span class="hljs-operator">/</span> <span class="hljs-literal">true</span> 空字符串自动转换为<span class="hljs-literal">false</span><br></code></pre></td></tr></table></figure>

</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box = (<span class="hljs-number">5</span> &gt; <span class="hljs-number">4</span>) &amp;&amp; (<span class="hljs-number">4</span> &gt; <span class="hljs-number">3</span>);       <span class="hljs-comment">//true，两边都为true，返回true </span><br>   <span class="hljs-keyword">var</span> box = (<span class="hljs-number">9</span> &gt; <span class="hljs-number">7</span>) || (<span class="hljs-number">7</span> &gt; <span class="hljs-number">8</span>);       <span class="hljs-comment">//true，两边只要有一边是true，返回true</span><br>   <span class="hljs-keyword">var</span> box = !(<span class="hljs-number">5</span> &gt; <span class="hljs-number">4</span>);                   <span class="hljs-comment">//false</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<ul>
<li>短路运算<ul>
<li>&amp;&amp;运算时，如果第一个操作数为false，不需要计算第二个数，结果返回false。</li>
<li>||运算时，如果第一个操作数为true，不需要计算第二个数，结果返回true。</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">/*&amp;&amp;运算符*/</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span>&amp;&amp;<span class="hljs-number">0</span>);<span class="hljs-comment">//0</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span>&amp;&amp;<span class="hljs-string">&#x27;abc&#x27;</span>);<span class="hljs-comment">//abc</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>&amp;&amp;<span class="hljs-number">132</span>);<span class="hljs-comment">//0</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>&amp;&amp;<span class="hljs-string">&#x27;&#x27;</span>);<span class="hljs-comment">//0</span></span><br><br><span class="javascript">    <span class="hljs-comment">// /*||运算符*/</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">123</span>||<span class="hljs-number">0</span>);<span class="hljs-comment">// 123</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>||<span class="hljs-string">&#x27;abc&#x27;</span>);<span class="hljs-comment">// abc</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>||<span class="hljs-number">132</span>);<span class="hljs-comment">// 132</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span>||<span class="hljs-string">&#x27;&#x27;</span>);<span class="hljs-comment">// &#x27;&#x27;</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;&#x27;</span>||<span class="hljs-number">0</span>);<span class="hljs-comment">// 0</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#x27;&#x27;</span>||<span class="hljs-number">123</span>);<span class="hljs-comment">// 123</span></span><br><br><span class="javascript">    <span class="hljs-comment">/*!运算符*/</span></span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="14-5-5-三元运算符"><a href="#14-5-5-三元运算符" class="headerlink" title="14.5.5 三元运算符"></a>14.5.5 三元运算符</h3><h4 id="什么是三元运算符-条件运算符"><a href="#什么是三元运算符-条件运算符" class="headerlink" title="什么是三元运算符 /条件运算符"></a>什么是三元运算符 /条件运算符</h4><p>三元条件运算符其实就是后面将要学到的if语句的简写形式。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br> <span class="hljs-keyword">var</span> box = <span class="hljs-number">5</span> &gt; <span class="hljs-number">4</span> ? <span class="hljs-string">&#x27;对&#x27;</span> : <span class="hljs-string">&#x27;错&#x27;</span>; <span class="hljs-comment">//对，5&gt;4返回true则把&#x27;对&#x27;赋值给box，反之。</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>A?B:C：如果A，那么B，否则C。</p>
<h2 id="14-6-流程控制语句"><a href="#14-6-流程控制语句" class="headerlink" title="14.6 流程控制语句"></a>14.6 流程控制语句</h2><h3 id="什么是流程控制语句"><a href="#什么是流程控制语句" class="headerlink" title="什么是流程控制语句"></a>什么是流程控制语句</h3><p>ECMA-262规定了一组流程控制语句。语句定义了ECMAScript中的主要语法，语句通常由一个或者多个关键字 来完成给定的任务。诸如：判断、循环、退出等。</p>
<h3 id="14-6-1-if语句"><a href="#14-6-1-if语句" class="headerlink" title="14.6.1 if语句"></a>14.6.1 if语句</h3><h4 id="1．if-条件表达式-语句"><a href="#1．if-条件表达式-语句" class="headerlink" title="1．if (条件表达式) 语句"></a>1．if (条件表达式) 语句</h4><p>if语句是基于条件成立才执行相应代码时使用的语句</p>
<h4 id="2．if-条件表达式-语句-else-语句"><a href="#2．if-条件表达式-语句-else-语句" class="headerlink" title="2．if (条件表达式) {语句;} else {语句;}"></a>2．if (条件表达式) {语句;} else {语句;}</h4><p>if…else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box = <span class="hljs-number">100</span>;     <br>   <span class="hljs-keyword">if</span> (box &gt; <span class="hljs-number">50</span>) &#123;      <br>   alert(<span class="hljs-string">&#x27;box大于50&#x27;</span>);               <span class="hljs-comment">//条件为true，执行这个代码块    </span><br>   &#125; <span class="hljs-keyword">else</span> &#123;     <br>   alert(<span class="hljs-string">&#x27;box小于50&#x27;</span>);               <span class="hljs-comment">//条件为false，执行这个代码块     </span><br>   &#125;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h4 id="3．if-条件表达式-语句-else-if-条件表达式-语句-．else-语句"><a href="#3．if-条件表达式-语句-else-if-条件表达式-语句-．else-语句" class="headerlink" title="3．if (条件表达式) {语句;} else if (条件表达式) {语句;} ..．else {语句;}"></a>3．if (条件表达式) {语句;} else if (条件表达式) {语句;} ..．else {语句;}</h4><p>要在多组语句中选择一组来执行，使用if..else嵌套语句。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box = <span class="hljs-number">100</span>;     <br>   <span class="hljs-keyword">if</span> (box &gt;= <span class="hljs-number">90</span>) &#123;   <span class="hljs-comment">//如果满足条件，不会执行下面任何分支        </span><br>   alert(<span class="hljs-string">&#x27;优秀&#x27;</span>);     <br>   &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (box &gt;= <span class="hljs-number">60</span>) &#123;         <br>   alert(<span class="hljs-string">&#x27;及格&#x27;</span>);     <br>   &#125; <span class="hljs-keyword">else</span> &#123; <span class="hljs-comment">//如果以上都不满足，则输出不及格         </span><br>   alert(<span class="hljs-string">&#x27;不及格&#x27;</span>);     <br>   &#125;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="14-6-2-switch语句"><a href="#14-6-2-switch语句" class="headerlink" title="14.6.2 switch语句"></a>14.6.2 switch语句</h3><h4 id="switch语句介绍"><a href="#switch语句介绍" class="headerlink" title="switch语句介绍"></a>switch语句介绍</h4><p>switch语句是多重条件判断，用于多个值相等的比较。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;<br>   <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">window</span>.prompt();     <br>   <span class="hljs-keyword">switch</span> (box) &#123;           <span class="hljs-comment">//用于判断box相等的多个值         </span><br>   <span class="hljs-keyword">case</span> <span class="hljs-number">1</span> :             <br>   alert(<span class="hljs-string">&#x27;one&#x27;</span>);             <br>   <span class="hljs-keyword">break</span>;                       <span class="hljs-comment">//break;用于防止语句的穿透        </span><br>   <span class="hljs-keyword">case</span> <span class="hljs-number">2</span> :             <br>   alert(<span class="hljs-string">&#x27;two&#x27;</span>); <span class="hljs-keyword">break</span>;        <br>   <span class="hljs-keyword">default</span> :                 <span class="hljs-comment">//相当于if语句里的else，否则的意思             </span><br>   alert(<span class="hljs-string">&#x27;error&#x27;</span>);     <br>   &#125;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">window</span>.prompt(<span class="hljs-string">&#x27;输入一个数字&#x27;</span>);<span class="hljs-comment">//保存数据类型，string</span></span><br><span class="javascript">      <span class="hljs-comment">//或者直接var box = prompt(&#x27;&#x27;);也可以</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(box);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> (box));</span><br><span class="javascript">    <span class="hljs-keyword">switch</span> (box) &#123;           <span class="hljs-comment">//用于判断box相等的多个值,如果输入的是非数字，那么将转换为true</span></span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;1&#x27;</span> :</span><br><span class="javascript">        alert(<span class="hljs-string">&#x27;one&#x27;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">break</span>;                       <span class="hljs-comment">//break;用于防止语句的穿透</span></span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;2&#x27;</span> :</span><br><span class="javascript">        alert(<span class="hljs-string">&#x27;two&#x27;</span>); <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">default</span> :                 <span class="hljs-comment">//相当于if语句里的else，否则的意思</span></span><br><span class="javascript">        alert(<span class="hljs-string">&#x27;error&#x27;</span>);</span><br>    &#125;<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> score =<span class="hljs-built_in">parseInt</span>(prompt(<span class="hljs-string">&quot;Enter a score&quot;</span>));</span><br><span class="javascript">    <span class="hljs-keyword">var</span> res = <span class="hljs-string">&#x27;&#x27;</span>;</span><br><span class="javascript">    <span class="hljs-keyword">switch</span> (<span class="hljs-built_in">Math</span>.floor(score / <span class="hljs-number">10</span>)) &#123;<span class="hljs-comment">//向下取整</span></span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">0</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">1</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">2</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">3</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">4</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">5</span>: res = <span class="hljs-string">&#x27;fail&#x27;</span>; <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">6</span>: res = <span class="hljs-string">&#x27;pass&#x27;</span>; <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">7</span>:</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">8</span>: res = <span class="hljs-string">&#x27;Well done&#x27;</span>; <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">9</span>: res = <span class="hljs-string">&#x27;Excellent&#x27;</span>; <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">case</span> <span class="hljs-number">10</span>: res = <span class="hljs-string">&#x27;Full Marks!&#x27;</span>; <span class="hljs-keyword">break</span>;</span><br><span class="javascript">      <span class="hljs-keyword">default</span>: res = <span class="hljs-string">&#x27;Please enter correct score!&#x27;</span></span><br>    &#125;<br><span class="javascript">    <span class="hljs-built_in">console</span>.log(score);</span><br>    alert(res);<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="14-6-3-do…while语句"><a href="#14-6-3-do…while语句" class="headerlink" title="14.6.3 do…while语句"></a>14.6.3 do…while语句</h3><h4 id="do…while语句介绍"><a href="#do…while语句介绍" class="headerlink" title="do…while语句介绍"></a>do…while语句介绍</h4><p>do…while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。</p>
<h3 id="14-6-4-while语句"><a href="#14-6-4-while语句" class="headerlink" title="14.6.4 while语句"></a>14.6.4 while语句</h3><h4 id="while语句介绍"><a href="#while语句介绍" class="headerlink" title="while语句介绍"></a>while语句介绍</h4><p>while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。</p>
<h3 id="14-6-5-for语句"><a href="#14-6-5-for语句" class="headerlink" title="14.6.5 for语句"></a>14.6.5 for语句</h3><h4 id="for语句介绍"><a href="#for语句介绍" class="headerlink" title="for语句介绍"></a>for语句介绍</h4><p>for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的 能力。</p>
<h3 id="14-6-6-break和continue语句"><a href="#14-6-6-break和continue语句" class="headerlink" title="14.6.6 break和continue语句"></a>14.6.6 break和continue语句</h3><p>break和continue语句介绍</p>
<p>break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执 行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。(不用于forEach()中)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="javascript">   <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> box = <span class="hljs-number">1</span>; box &lt;= <span class="hljs-number">10</span>; box++) &#123;</span><br>       if (box == 5)<br><span class="javascript">       <span class="hljs-keyword">break</span>;                         <span class="hljs-comment">//如果box是5，就退出循环</span></span><br><span class="javascript">           <span class="hljs-comment">//continue;                   //如果box是5，就退出当前循环  </span></span><br><span class="javascript">       <span class="hljs-built_in">document</span>.write(box);</span><br><span class="javascript">       <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;&lt;br /&gt;&#x27;</span>); </span><br>   &#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="14-8-实训"><a href="#14-8-实训" class="headerlink" title="14.8 实训"></a>14.8 实训</h2><ol>
<li><p>判断一个年份是闰年还是平年，闰年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> year = <span class="hljs-built_in">parseInt</span>(prompt(<span class="hljs-string">&#x27;Enter a year:&#x27;</span>));</span><br><span class="javascript">    <span class="hljs-keyword">if</span>(<span class="hljs-built_in">isNaN</span>(year))&#123;</span><br><span class="javascript">      alert(<span class="hljs-string">&#x27;Please enter a year!&#x27;</span>);</span><br>    &#125;<br>    if(year%4===0&amp;&amp;year%100!==0)&#123;<br><span class="javascript">      alert(year + <span class="hljs-string">&#x27; is leap year.&#x27;</span>);</span><br>    &#125;<br><span class="javascript">    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(year%<span class="hljs-number">400</span>===<span class="hljs-number">0</span>)&#123;</span><br><span class="javascript">      alert(year + <span class="hljs-string">&#x27; is leap year.&#x27;</span>);</span><br><span class="javascript">    &#125;<span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">      alert(year + <span class="hljs-string">&#x27; is not leap year.&#x27;</span>);</span><br>    &#125;<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>计算1-100之间所有数的和。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>;</span><br><span class="javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;i&lt;=<span class="hljs-number">100</span>;i++)&#123;</span><br>      sum += i;<br>    &#125;<br><span class="javascript">    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;1+^……+100 = &#x27;</span>+ sum)</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—5，则增加15%；若小于2，则增加 10%工资。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> work_years = prompt(<span class="hljs-string">&#x27;Enter your work year:&#x27;</span>), salary = <span class="hljs-built_in">parseInt</span>(prompt(<span class="hljs-string">&#x27;Enter your salary:&#x27;</span>));</span><br>    if (work_years &lt; 2) &#123;<br>      salary = salary + salary * 0.1<br><span class="javascript">    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (work_years &lt; <span class="hljs-number">5</span>) &#123;</span><br>      salary = salary + salary * 0.15<br><span class="javascript">    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (work_years &gt; <span class="hljs-number">5</span>) &#123;</span><br>      salary = salary + salary * 0.2<br><span class="javascript">    &#125;<span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">      <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;Please enter correct data&#x27;</span>);</span><br>    &#125;<br><span class="javascript">    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;Your salary is &#x27;</span> + salary);</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>求1-100之间不能被7整除的整数的和（用continue）。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>;</span><br><span class="javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">100</span>;i &gt;= <span class="hljs-number">1</span>;i--)&#123;</span><br><span class="javascript">        <span class="hljs-keyword">if</span>(i%<span class="hljs-number">7</span> !== <span class="hljs-number">0</span>) <span class="hljs-keyword">continue</span>;</span><br>        sum += i;<br><span class="javascript">        <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;Sum is &#x27;</span> + sum)</span><br>    &#125;<br><span class="javascript">    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;Sum is &#x27;</span> + sum)</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>求200-300之间第一个能被7整数的数（break）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">200</span>;i &lt;= <span class="hljs-number">300</span>;i++)&#123;</span><br><span class="javascript">      <span class="hljs-keyword">if</span>(i%<span class="hljs-number">7</span>===<span class="hljs-number">0</span>) <span class="hljs-keyword">break</span>;</span><br>    &#125;<br><span class="javascript">    <span class="hljs-built_in">document</span>.write(<span class="hljs-string">&#x27;This first answer is &#x27;</span> + i);</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
</ol>
<ul>
<li>扩展<ul>
<li>将值转换为INT型parseInt()/整数型parseFloat()</li>
<li>Math.floor():向下取整</li>
<li>用JS向HTML中写入标签：document.write(‘<code>&lt;br/&gt;</code>‘)</li>
<li>for …… in用于遍历数组/对象，forEach()用于遍历数组。</li>
</ul>
</li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JS/">JS</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/05/30/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A016/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript高级</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/05/22/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A017/">
                        <span class="hidden-mobile">JS正则表达式</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;">
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/img/police_beian.png" srcset="/img/loading.gif" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      $('#local-search-input').on('click', function() {
        searchFunc(path, 'local-search-input', 'local-search-result');
      });
      $('#modalSearch').on('shown.bs.modal', function() {
        $('#local-search-input').focus();
      });
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"right","hOffset":0,"vOffset":-20},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>
